<script setup lang="ts">
  import { ref } from 'vue'
  import { DividerConfig } from '../../../hooks/types'
  import CustomTitle1 from '../../component-list/custom-title/Title1.vue'
  import CustomTitle2 from '../../component-list/custom-title/Title2.vue'
  import CustomTitle3 from '../../component-list/custom-title/Title3.vue'
  import CustomTitle4 from '../../component-list/custom-title/Title4.vue'
  import CustomTitle5 from '../../component-list/custom-title/Title5.vue'
  import CustomTextarea from '../../component-list/CustomTextarea.vue'
  import CustomInput from '../../component-list/CustomInput.vue'
  import CustomTitle6 from '../../component-list/custom-title/Title6.vue'
  import CustomTitle7 from '../../component-list/custom-title/Title7.vue'
  import CustomTitle8 from '../../component-list/custom-title/Title8.vue'
  import CustomTitle9 from '../../component-list/custom-title/Title9.vue'

  defineOptions({
    name: 'OrderCustomFormDividerSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  // 绑定的值
  const value = defineModel<DividerConfig>('modelValue', { required: true })

  // 标题样式选择列表显示状态
  const selectListVisible = ref(false)

  /**
   * 发射事件调用
   */
  const emitsCall = () => {
    emits('change')
  }

  /**
   * 样式选项点击事件
   * @param {string} style - 选择的样式
   */
  const handleStyleClick = (
    style:
      | 'style1'
      | 'style2'
      | 'style3'
      | 'style4'
      | 'style5'
      | 'style6'
      | 'style7'
      | 'style8'
      | 'style9',
  ) => {
    value.value.style = style
    emitsCall()
  }
</script>

<template>
  <div class="order-custom-form-divider-setting">
    <div class="setting-item divider desc">
      <div class="label">标题</div>
      <div class="value">
        <custom-input v-model="value.title" placeholder="请输入标题" @input="emitsCall" />
      </div>
    </div>

    <div class="setting-item divider desc">
      <div class="label">描述信息</div>
      <div class="value">
        <custom-textarea v-model="value.desc" placeholder="请输入描述信息" @input="emitsCall" />
      </div>
    </div>

    <div class="setting-item divider style">
      <div class="label">样式</div>
      <div class="value" @click="selectListVisible = !selectListVisible">
        <custom-title1
          v-show="value.style === 'style1'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
        />
        <custom-title2
          v-show="value.style === 'style2'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title3
          v-show="value.style === 'style3'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title4
          v-show="value.style === 'style4'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title5
          v-show="value.style === 'style5'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title6
          v-show="value.style === 'style6'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title7
          v-show="value.style === 'style7'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title8
          v-show="value.style === 'style8'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <custom-title9
          v-show="value.style === 'style9'"
          :desc="value.desc"
          :title="value.title"
          :title-color="value.titleColor"
          :divider-color="value.dividerColor"
        />
        <div class="opeate">
          <i class="iconfont icon-arrow-down"></i>
        </div>

        <div v-show="selectListVisible" class="select-list">
          <div class="select-item" @click="handleStyleClick('style1')">
            <custom-title1
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style2')">
            <custom-title2
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style3')">
            <custom-title3
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style4')">
            <custom-title4
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style5')">
            <custom-title5
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style6')">
            <custom-title6
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style7')">
            <custom-title7
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style8')">
            <custom-title8
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
          <div class="select-item" @click="handleStyleClick('style9')">
            <custom-title9
              :desc="value.desc"
              :title="value.title"
              :title-color="value.titleColor"
              :divider-color="value.dividerColor"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="setting-item divider title-color">
      <div class="label">标题字体颜色</div>
      <div class="value">
        <el-color-picker v-model="value.titleColor" size="small" @change="emits('change')" />
      </div>
    </div>

    <div class="setting-item divider title-color">
      <div class="label">分割线颜色颜色</div>
      <div class="value">
        <el-color-picker v-model="value.dividerColor" size="small" @change="emits('change')" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-divider-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }

    .style {
      .value {
        border: 1px solid #dcdfe6;
        height: 80px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 12px;
        position: relative;
        cursor: pointer;

        .opeate {
          width: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .select-list {
          position: absolute;
          top: -360px;
          left: 0;
          width: 100%;
          background-color: #fff;
          box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
          border-radius: 4px;
          height: 350px;
          z-index: 99;
          padding: 12px;
          box-sizing: border-box;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .select-item {
            min-height: 80px;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            padding: 12px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
